<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div ng-controller="TimeConductorController as tcController"
    class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
        ng-class="{'status-panning': tcController.panning}" ng-show="showTimeConductor">
    <div class="flex-elem holder time-conductor-icon">
        <div class="hand-little"></div>
        <div class="hand-big"></div>
    </div>

    <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
        <!-- Holds inputs and ticks -->
        <div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
            <form class="l-time-conductor-inputs-holder"
                  ng-submit="tcController.setBounds(boundsModel)">
                <span class="l-time-range-w start-w">
                    <span class="l-time-conductor-inputs">
                        <span class="l-time-range-input-w start-date">
                            <span class="title"></span>
                            <mct-control key="'datetime-field'"
                                         structure="{
                                             format: timeSystemModel.format,
                                             validate: tcController.validation.validateStart
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setBounds(boundsModel)"
                                         field="'start'"
                                         class="time-range-input">
                            </mct-control>
                        </span>
                            <span class="l-time-range-input-w time-delta start-delta"
                              ng-class="{'hide':(modeModel.selectedKey === 'fixed')}">
                                -
                            <mct-control key="'datetime-field'"
                                         structure="{
                                            format: timeSystemModel.deltaFormat,
                                            validate: tcController.validation.validateStartDelta
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setDeltas(boundsModel)"
                                         field="'startDelta'"
                                         class="hrs-min-input">
                            </mct-control>
                        </span>
                    </span>
                </span>
                <span class="l-time-range-w end-w">
                    <span class="l-time-conductor-inputs">
                        <span class="l-time-range-input-w end-date"
                              ng-controller="ToggleController as t2">
                            <span class="title"></span>
                            <mct-control key="'datetime-field'"
                                         structure="{
                                             format: timeSystemModel.format,
                                             validate: tcController.validation.validateEnd
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setBounds(boundsModel)"
                                         ng-disabled="modeModel.selectedKey !== 'fixed'"
                                         field="'end'"
                                         class="time-range-input">
                            </mct-control>
                        </span>
                        <span class="l-time-range-input-w time-delta end-delta"
                              ng-class="{'hide':(modeModel.selectedKey === 'fixed')}">
                                +
                            <mct-control key="'datetime-field'"
                                         structure="{
                                            format: timeSystemModel.deltaFormat,
                                            validate: tcController.validation.validateEndDelta
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setDeltas(boundsModel)"
                                         field="'endDelta'"
                                         class="hrs-min-input">
                            </mct-control>
                        </span>
                    </span>
                </span>

                <input type="submit" class="hidden">
            </form>
            <mct-conductor-axis></mct-conductor-axis>
        </div>

        <!-- Holds data visualization, time of interest -->
        <div class="l-data-visualization-holder l-row-elem flex-elem"
             ng-controller="ConductorTOIController as toi">
            <a class="l-page-button s-icon-button icon-pointer-left"></a>
            <div class="l-data-visualization" ng-click="toi.setTOIFromPosition($event)">
                <mct-include key="'time-of-interest'"
                             class="l-toi-holder show-val"
                             ng-class="{ pinned: toi.pinned, 'val-to-left': toi.left > 80 }"
                             ng-style="{'left': toi.left + '%'}"></mct-include>
            </div>
            <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
        </div>

        <!-- Holds time system and session selectors, and zoom control -->
        <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
            <mct-include
                key="'mode-selector'"
                ng-model="modeModel"
                class="holder flex-elem menus-up mode-selector">
            </mct-include>
            <mct-control
                    key="'menu-button'"
                    class="holder flex-elem menus-up time-system"
                    structure="{
                        text: timeSystemModel.selected.metadata.name,
                        click: tcController.selectTimeSystemByKey,
                        options: timeSystemModel.options
                    }">
            </mct-control>
            <!-- Zoom control -->
            <div ng-if="tcController.supportsZoom"
                 class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
                {{currentZoom}}
                <span
                        class="time-conductor-zoom-current-range flex-elem flex-fixed holder">{{timeUnits}}</span>
                <input class="time-conductor-zoom flex-elem" type="range"
                       ng-model="tcController.currentZoom"
                       ng-mouseUp="tcController.onZoomStop(tcController.currentZoom)"
                       ng-change="tcController.onZoom(tcController.currentZoom)"
                       min="0.01"
                       step="0.01"
                       max="0.99" />
            </div>
        </div>

    </div>
</div>
